<template>
    <div class="increase">
        <Header title="发布公告" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <div class="old_wrapper">
            <div class="old_main">
                <p>标题</p>
                <input class="text" type="text" v-model="title" placeholder="请输入标题">
            </div>
            <div class="old_main">
                <p>当前楼栋：</p>
                <span class="user">{{unit}}</span>
            </div>
            <div class="old_foot">
                <p>内容：</p>
                <textarea placeholder="请在此处输入内容" maxlength="500" v-model="person" cols="30" rows="5"></textarea>
                <p class="old_nub">{{len}}/500</p>
            </div>
        </div>
        <div class="btn" @click="release">发布</div>
    </div>
</template>

<script>
import Header from './header'
import { raise } from '../old_request'
import { Toast } from "mint-ui";
export default {
    data(){
        return{
            unit:'',
            len:0,                      //输入数字长度
            person:'',
            title:''
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                //返回上一页
        },
        release(){                                  //点击发布公告
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}blockId=${that.$store.state.blockid}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "blockId":that.$store.state.blockid,
                "userId":that.$store.state.userid,
                "mobile":that.wrapper.getlocalstoage('mobile'),
                "title":that.title,
                "content":that.person 
            }

            raise(data,that).then( (res)=>{
                console.log(res)
                if(res.code === 0){
                    Toast({
                        message: "添加成功",
                        iconClass: "iconfont icon-success_no_circle",
                        duration: 1500
                    });
                    setTimeout(function(){
                        that.$router.replace('/notice');
                    },2000)
                }
            })

        }
    },
    watch:{
        'person':function(newold){
            this.len = newold.length;
        }
    },
    created(){
        let that = this;
        that.unit = that.$store.state.unit;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
    },
}
</script>

<style scoped>

    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .increase{
        background: #EFEFF4;
        margin-top: 50px;
        position: fixed;
        height: 100%;
        width: 100%;
    }
    .old_main{
        width: 100%;
        height: 55px;
        line-height: 55px;
        background: #FFFFFF;
        display: flex;
    }
    .text{
        border: none;
        outline: none;
        padding-left: 15%;
        font-size: 18px;
    }
    .old_main p{
        padding:0 3.5%;
        font-size: 18px;
    }
    .old_main:last-child{
        border-top: 1px solid #EFEFF4;
    }
    .user{
        font-size: 19px;
    }
    .old_foot{
        background: #FFFFFF;
        padding: 20px 3.5%;
        border-top: 1px solid #EFEFF4;
    }
    .old_foot textarea{
        border:none;
        outline: none;
        margin-top:20px;
        font-size: 18px; 
    }
    .old_foot p:nth-of-type(1){
        font-size: 18px;
    }
    .old_nub{
        text-align: right;
        margin-right: 1%;
        font-size: 18px;
        color: #ccc;
    }
    .btn {
        width: 90%;
        height: 45px;
        line-height: 45px;
        position: fixed;
        bottom: 24px;
        left:5%;
        color: white;
        background: linear-gradient(to right, #128ae7, #12ade7);
        text-align: center;
        border-radius: 50px;
    }
</style>